import React, { Component ,ComponentClass} from 'react';
import {AtForm, AtInput, AtIcon, AtModal} from "taro-ui";
import Taro from '@tarojs/taro';
import {Block, Image, Picker, Text, View} from '@tarojs/components'
import {http} from '../../utils/http'
import {
  BASE_URL,
  UPLODE_FALE,
  GROUP_ADD_LINKINFO,
  GROUP_EDIT_LINKINFO,
  GROUP_DEL_LINKINFO,
  GROUP_LINKINFO_DATA,
  GET_LINK_USER_INFO,
  GET_LINK_USER_EDIT,
  GET_LINK_USER_DEL,
  GET_LINK_USER_ADD,
  OCR, FACE, TARO_ENV,
  materialMedia, REGION_ALL
} from '../../constants/api'
import {platform} from "../../utils/platform-settting.service";
import {newHttp} from "../../utils/request";
import {processAddress} from "../../utils/auto.Identify"
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import {lxH5Wx} from "../../utils/lx.h5.service";
import './addcontact.scss'

interface pageState {
  onlyTicketPay: any
  contactDataStore: any
  addressData: any
  rangeKey: any
  rangeData: any
  page: string
  isSunmit: boolean
  idcardTime: number
  contactData: {
    checked: boolean
    province: string
    city: string
    region: string
    address: string
    comments: string
    idcard: string
    mark: string
    name: string
    phone: string
    upload_file: []
    face: string
  }
  storageContact: any
  idx: number
  index: number
  itemId: string
  isCombination?: any
  goodsUuid: string
  config: any
  fieldCustom: any
  fieldCustomError: any
  upCount: number
  onlyTicketPayIdx: number
  goodsId: string
  delModal: boolean
  region: any
  isSave: boolean
}

type PageOwnProps = {}
type PageState = {}

class addcontact extends Component {
  state: pageState = {
    onlyTicketPay: '0',
    contactDataStore: [],
    addressData: [],
    page: '',
    rangeKey: [0, 0, 0],
    rangeData: [[], [], []],
    isSunmit: false,
    idcardTime: 0,
    contactData: {
      checked: false,
      province: '',
      city: '',
      region: '',
      address: '',
      comments: '',
      idcard: '',
      mark: '',
      name: '',
      phone: '',
      upload_file: [],
      face: ''
    },
    storageContact: [],
    idx: 0,
    itemId: '',
    goodsUuid: '',
    isCombination: '',
    index: 0,
    config: {},
    fieldCustom: [],
    fieldCustomError: {
      comments: '请输入留言',
      mark: '请输入备注',
      province: '请选择省市区',
      city: '请选择省市区',
      region: '请选择省市区',
      address: '请输入详细地址',
      idcard: '请输入身份证号码',
      name: '请输入姓名',
      phone: '请输入手机号',
      upload_file: '请上传图片',
      face: '请上传人脸'
    },
    upCount: 1,
    onlyTicketPayIdx: 0,
    goodsId: '',
    delModal: false,
    region: [],
    isSave: false,
  }

  async componentDidShow() {
    vcmonitor(this);
  }

  async UNSAFE_componentWillMount() {
    const onlyTicketPay = Taro.getCurrentInstance().router.params.onlyTicketPay
    const contactDataStore = Taro.getStorageSync("contactDataStore")
    this.setState({onlyTicketPay, contactDataStore})
    const res = Taro.getStorageSync("contactData")
    if (res) this.setState({storageContact: res})
    if (process.env.TARO_ENV === 'h5') {
      const data = await http.carGet(REGION_ALL)
      this.setState({addressData: data}, async () => {
        this.handleCityData([0, 0, 0]);
      })
    }
    const addcontact = Taro.getStorageSync("addcontact")
    this.setState({
      page: addcontact.page,
      goodsUuid: addcontact.goodsUuid,
      idx: addcontact.idx === 0 ? 0 : (addcontact.idx || null),
      isCombination: addcontact.isCombination,
      itemId: addcontact.itemId,
      goodsId: addcontact.goodsId,
      config: JSON.parse(addcontact.config),
      isSave: addcontact.isSave
    }, async () => {
      const {contactData, config, fieldCustom} = this.state
      for (const k in config) {
        if (k.includes('field')) {
          contactData[k] = ''
          fieldCustom.push({k: config[k].k, ckd: config[k].ckd, name: k})
        }
      }
      this.setState({fieldCustom: fieldCustom})
      if (typeof (this.state.idx) != "undefined" && null != this.state.idx && this.state.goodsUuid) {
        let linkInfo = false
        if (onlyTicketPay === '1') {
          const onlyTicketPayIdx = contactDataStore.findIndex(item => item.uuid === this.state.goodsUuid)
          linkInfo = contactDataStore[onlyTicketPayIdx]
          this.setState({onlyTicketPayIdx})
        } else {
          linkInfo = await http.carGet(this.state.page == 'confirm' ? GET_LINK_USER_INFO : GROUP_LINKINFO_DATA, {
            uuid: this.state.goodsUuid,
            goodsId: this.state.goodsId
          })
        }
        if (linkInfo) {
          const linkInfoData = linkInfo
          linkInfoData.value = typeof linkInfoData.value === 'object' ? linkInfoData.value : JSON.parse(linkInfoData.value)
          if (!linkInfoData.value[0].upload_file) linkInfoData.value[0].upload_file = []
          this.state.region = [linkInfoData['value'][0].province, linkInfoData['value'][0].city, linkInfoData['value'][0].region]
          this.setState({contactData: linkInfoData['value'][0], region: this.state.region})
        }
      } else {
        Taro.getClipboardData({
          success: async (res) => {
            const result: any = processAddress(res.data)
            if (res.data && result && (result.name || result.phone)) {
              const r = /^1[0-9]{10}$/;　　//1开头0-9内十位数
              const tempName = result.name || "";
              const tempPhone = result.phone && result.phone.length === 11 && r.test(result.phone) ? result.phone : "";

              await this.setState({
                contactData: {
                  checked: false,
                  province: '',
                  city: '',
                  region: '',
                  address: '',
                  comments: '',
                  idcard: '',
                  mark: '',
                  name: tempName,
                  phone: tempPhone,
                  upload_file: [],
                  face: ''
                },
              })
            }
          }
        })
      }
    })
    if (platform.info && platform.info.platformName) {
      Taro.setNavigationBarTitle({
        title: platform.info.platformName
      })
    }
  }

  // 保存
  async contactAdd(type, show = true) {
    const {contactData, idx, goodsUuid, goodsId, config, fieldCustomError, isSunmit, onlyTicketPayIdx} = this.state
    if (isSunmit) return
    this.setState({isSunmit: true})
    const time = setTimeout(() => {
      this.setState({isSunmit: false})
      clearTimeout(time)
    }, 2000)
    const _config = []
    const r = /^1[0-9]{10}$/;　　//1开头0-9内十位数
    for (const k in config) {
      if (typeof config[k] != "object" && config[k]) {
        _config.push(k)
        if ((!contactData[k] || contactData[k].length == 0) && k !== 'mark' && k !== 'comments') {
          Taro.showToast({title: fieldCustomError[k], icon: 'none'})
          return
        }
      } else if (typeof config[k] == "object") {
        _config.push(k)
        if (config[k].ckd && !contactData[k]) {
          Taro.showToast({title: '请填写必填项', icon: 'none'})
          return
        }
      }
    }
    for (const k in _config) {
      if (_config.indexOf('name') === -1) {
        _config.push('name')
      }
      if (_config.indexOf('phone') === -1) {
        _config.push('phone')
      }
    }
    if (config.address && !contactData['province'] && !contactData['city'] && !contactData['region']) {
      Taro.showToast({title: '请填写必填项', icon: 'none'})
      return
    }
    if (!contactData.phone && config['phone'] === false) {
      contactData.phone = '13700000000'
    }
    if (!contactData.name && config['name'] === false) {
      contactData.name = '-'
    }
    if (!r.test(contactData.phone)) {
      Taro.showToast({title: '手机号码格式不正确', icon: 'none'})
      return false
    }
    contactData.checked = true
    if (typeof (idx) != "undefined" && null != idx && this.state.goodsUuid) {
      if (this.state.onlyTicketPay === '1') {
        const contactDataStore = this.state.contactDataStore
        contactDataStore.splice(onlyTicketPayIdx, 1, {
          value: JSON.stringify([contactData]),
          goodsId,
          uuid: goodsUuid,
          id: goodsUuid,
          config: _config.join(',')
        })
        Taro.setStorageSync('contactDataStore', contactDataStore)
        if (type == 1) {
          const time = setTimeout(() => {
            clearTimeout(time)
            Taro.navigateBack({
              delta: 1
            })
          }, 2000)
        }
        return false
      }
      const data = await newHttp.catchPost(this.state.page == 'confirm' ? GET_LINK_USER_EDIT : GROUP_EDIT_LINKINFO, {
        linkinfo: '[' + JSON.stringify(contactData) + ']',
        goodsId,
        uuid: goodsUuid,
        config: _config.join(',')
      })
      if (data) {
        if (show) {
          Taro.showToast({title: '修改成功', icon: 'none'})
          if (type == 1) {
            const time = setTimeout(() => {
              clearTimeout(time)
              Taro.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        }
      }
    } else {
      if (this.state.onlyTicketPay === '1') {
        const contactDataStore = this.state.contactDataStore
        const uuid = parseInt(String((1 + Math.random()) * 99999999))
        contactDataStore.push({
          value: JSON.stringify([contactData]),
          goodsId,
          id: uuid,
          uuid,
          config: _config.join(',')
        })
        Taro.setStorageSync('contactDataStore', contactDataStore)
        if (type == 1) {
          const time = setTimeout(() => {
            clearTimeout(time)
            Taro.navigateBack({
              delta: 1
            })
          }, 2000)
        } else {
          this.setState({
            contactData: {
              checked: false,
              province: '',
              city: '',
              region: '',
              address: '',
              comments: '',
              idcard: '',
              mark: '',
              name: '',
              phone: '',
              upload_file: [],
            }
          })
        }
        return false
      }
      const data = await newHttp.catchPost(this.state.page == 'confirm' ? GET_LINK_USER_ADD : GROUP_ADD_LINKINFO, {
        linkinfo: '[' + JSON.stringify(contactData) + ']',
        goodsId,
        config: _config.join(',')
      })
      if (data) {
        const tipMsg = data === "ok" ? "添加成功" : data;
        Taro.showToast({title: tipMsg, icon: 'none'})
        if (data != '联系人已存在') {
          Taro.setStorageSync('addContact', true)
          if (type == 1) {
            const time = setTimeout(() => {
              clearTimeout(time)
              Taro.navigateBack({
                delta: 1
              })
            }, 2000)
          } else {
            this.setState({
              contactData: {
                checked: false,
                province: '',
                city: '',
                region: '',
                address: '',
                comments: '',
                idcard: '',
                mark: '',
                name: '',
                phone: '',
                upload_file: [],
              }
            })
          }
        }

      }
    }
  }

  handleChange(name, value) {
    // this.state.contactData[name] = value.replace(/\s+/g, '')
    const {contactData} = this.state
    contactData[name] = value.replace(/\s+/g, '')
    this.setState({contactData})
  }

  async delLink() {
    const {goodsId, goodsUuid, onlyTicketPay, onlyTicketPayIdx} = this.state
    let data
    if(onlyTicketPay === '1') {
      const contactDataStore = this.state.contactDataStore
      contactDataStore.splice(onlyTicketPayIdx, 1)
      Taro.setStorageSync('contactDataStore', contactDataStore)
      data = 'ok'
    } else {
      data = await newHttp.catchPost(this.state.page == 'confirm' ? GET_LINK_USER_DEL : GROUP_DEL_LINKINFO, {
        goodsId,
        uuid: goodsUuid
      })
    }
    if (data == 'ok') {
      this.setState({delModal: false})
      Taro.showToast({title: '删除成功', icon: "none"})
      const time = setTimeout(() => {
        clearTimeout(time)
        Taro.navigateBack({
          delta: 1
        })
      }, 2000)

    }
  }

  regionChange(e) {
    const {contactData} = this.state
    contactData.province = e.detail.value[0]
    contactData.city = e.detail.value[1]
    contactData.region = e.detail.value[2]
    this.setState({contactData})
  }

  delUplodeImg(index, i) {
    const {contactData} = this.state
    if (index == 2) {
      contactData['face'] = ''
    } else {
      contactData['upload_file'].splice(i, 1)
    }
    this.setState({
      contactData
    })
  }

  async doUploadImg(localIds, group, api, i) {
    if (i > localIds.length) {
      return
    }
    const that = this
    let {contactData, idcardTime} = this.state
    h5Wx.wxuploadImage(localIds[i], async res => {
      if (group == 1) {
        const dataRet = await newHttp.catchGet(materialMedia + res, {media_id: res})
        if (dataRet) {
          contactData['upload_file'].push(dataRet)
          that.setState({contactData, idcardTime})
        }
        if (i === localIds.length - 1) {
          Taro.hideToast();
        }
      } else {
        const dataRet = await newHttp.catchPost(api, {media_id: res}, true)
        Taro.hideToast();
        const data = dataRet;
        if (dataRet.status == 400) {
          await Taro.showModal({
            title: '',
            content: data.data.message,
            showCancel: false,
            confirmText: '确定'
          })
          return
        }
        if (group === 0) {
          if (data && data.idcard) {
            contactData.idcard = data.idcard
            idcardTime++
          }
        }
        if (group === 1) {
          if (data.imageUrl) {
            contactData['upload_file'].push(data.imageUrl)
          }
        }
        if (group === 2) {
          if (data.domain && data.url) {
            contactData['face'] = data.domain + data.url
          }
        }
        that.setState({contactData, idcardTime})
      }
      i = i + 1;
      //递归上传
      that.doUploadImg(localIds, group, api, i)
    })
  }

  async syncUpload(localIds, group, api) {
    //从第1个开始，里面进行递归上传
    this.doUploadImg(localIds, group, api, 0)
  }

  uplodeImg(group = 0) {
    const that = this
    const count = group === 1 ? 9 : 1
    let {contactData, idcardTime} = this.state
    if (group === 0) {
      contactData['idcard'] = ''
    }
    this.setState({contactData})
    const apiList = [OCR, UPLODE_FALE, FACE]
    const api = BASE_URL + apiList[group]
    if (process.env.TARO_ENV === 'h5') {
      if (process.env.P_ENV === 'lx') {
        lxH5Wx.chooseImage(async (files, length) => {
          if (group === 1) { // 图片
            lxH5Wx.uploadFile(files, length, (url) => {
              if (!contactData.upload_file) {
                contactData['upload_file'] = []
              }
              contactData['upload_file'].push(url)
              that.setState({contactData})
            })
          } else if (group === 2) { // 人脸
            lxH5Wx.uploadFace(files, length, (url) => {
              contactData['face'] = url
              that.setState({contactData})
            })
          } else if (group === 0) {
            lxH5Wx.uploadOcr(files, length, (data) => {
              contactData.idcard = data.idcard
              that.setState({contactData})
            })
          }
        }, group === 1 ? 2 : 1)
      } else {
        h5Wx.chooseImage(count, async ret => {
          Taro.showToast({
            title: group === 0 ? '正在识别...' : '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          })
          that.syncUpload(ret, group, api)
        }, 'big')
      }
    } else {
      Taro.chooseImage({
        count,  //最多可以选择的图片总数
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          //启动上传等待中...
          Taro.showToast({
            title: group === 2 ? '正在识别...' : '正在上传...',
            icon: 'loading',
            mask: true,
            duration: 10000
          })
          let uploadImgCount = 0;
          for (let i = 0, h = tempFilePaths.length; i < h; i++) {
            Taro.uploadFile({
              url: api,
              filePath: tempFilePaths[i],
              name: group === 2 ? 'face' : 'file',
              formData: {
                'imgIndex': i
              },
              header: http.getHeader(),
              success: function (res) {
                uploadImgCount++;
                const data = JSON.parse(res.data);
                if (res.statusCode == 400) {
                  Taro.showToast({
                    title: data.message,
                    icon: 'none'
                  })
                  return
                }
                if (group === 0) {
                  if (data.data && data.data.idcard) {
                    contactData.idcard = data.data.idcard
                    idcardTime++
                  }
                }
                if (group === 1) {
                  if (data.imageUrl) {
                    contactData['upload_file'].push(data.imageUrl)
                  }
                }
                if (group === 2) {
                  if (data.data.domain && data.data.url) {
                    contactData['face'] = data.data.domain + data.data.url
                  }
                }

                //如果是最后一张,则隐藏等待中
                if (uploadImgCount == tempFilePaths.length) {
                  that.setState({contactData, idcardTime})
                  Taro.hideToast();
                }
              },
              fail: function (res) {
                Taro.hideToast();
                Taro.showModal({
                  title: '错误提示',
                  content: '上传图片失败',
                  showCancel: false,
                  success: function (res) {
                  }
                })
              }
            });
          }
        }
      })
    }
  }

  handleCityData = key => {
    const {addressData} = this.state
    // 处理数据。
    const provinceList = []; // 省
    const cityList = []; // 市
    const areaList = []; // 区
    for (let i = 0; i < addressData.length; i++) {
      // 获取省
      const province = addressData[i];
      provinceList.push(province.name);
    }
    if (addressData[key[0]].areaList && addressData[key[0]].areaList.length > 0) {
      for (let i = 0; i < addressData[key[0]].areaList.length; i++) {
        // 获取对应省下面的市
        const city = addressData[key[0]].areaList[i];
        cityList.push(city.name);
      }
    }
    for (
      let i = 0;
      i < addressData[key[0]].areaList[key[1]].areaList.length;
      i++
    ) {
      // 获取市下面对应区
      const country = addressData[key[0]].areaList[key[1]].areaList[i].name;
      areaList.push(country);
    }
    // }
    const newRange = [];
    newRange.push(provinceList);
    newRange.push(cityList);
    newRange.push(areaList);
    this.setState({
      rangeData: newRange, // 省市区所有的数据
      rangeKey: key // key是多列选择器需要展示的下标，因为是初始化，所以我们传入[0,0,0]
    });
  };
  onChange = e => {
    const {value} = e.detail;
    this.getAddressName(value);
  };
  getAddressName = value => {
    // 这里是转化用户选择的地址数据
    const {contactData, addressData} = this.state
    const formData = {
      province: "",
      city: "",
      region: ""
    };
    if (addressData[value[0]]) {
      formData.province = addressData[value[0]].name; // 省名称
      if (
        addressData[value[0]].areaList &&
        addressData[value[0]].areaList[value[1]]
      ) {
        formData.city = addressData[value[0]].areaList[value[1]].name;
        if (
          addressData[value[0]].areaList[value[1]].areaList &&
          addressData[value[0]].areaList[value[1]].areaList[value[2]]
        ) {
          formData.region =
            addressData[value[0]].areaList[value[1]].areaList[
              value[2]
              ].name;
        }
      }
    }
    contactData['province'] = formData.province
    contactData['city'] = formData.city
    contactData['region'] = formData.region
    this.setState({
      contactData, region: [formData.province + ',' + formData.city + "," + formData.region]
    });
  };
  onColumnChange = e => {
    const {rangeKey} = this.state;
    const changeColumn = e.detail;
    const {column, value} = changeColumn;
    switch (column) { // 根据改变不同的列，来显示不同的数据
      case 0:
        this.handleCityData([value, 0, 0]);
        break;
      case 1:
        this.handleCityData([rangeKey[0], value, 0]);
        break;
      case 2:
        this.handleCityData([rangeKey[0], rangeKey[1], value]);
        break;
    }
  };

  render() {
    const {
      isCombination,
      rangeData,
      rangeKey,
      idcardTime,
      contactData,
      config,
      fieldCustom,
      idx,
      delModal,
      region
    } = this.state
    return (
      <View className='addcontact-root'>
        <GzhAuth />
        <AtForm className={`person ${process.env.TARO_ENV} person-add`} customStyle='margin-top:20rpx;'>
          {config.name && <AtInput clear className='require' name='name' type='text'
            value={contactData.name} title='姓名' placeholder='购买人的真实姓名'
            onChange={this.handleChange.bind(this, 'name')}
          >
          </AtInput>}
          {config.phone && <AtInput clear className='require' name='phone' type='number'
            value={contactData.phone} title='手机号码' placeholder='购买人手机号'
            onChange={this.handleChange.bind(this, 'phone')}
          ></AtInput>}
          {config.idcard && <AtInput clear key={idcardTime} className='require' name='idcard' type='idcard'
            value={contactData.idcard} title='身份证号' placeholder='购买人身份证号'
            onChange={this.handleChange.bind(this, 'idcard')}
          >
            <AtIcon onClick={this.uplodeImg.bind(this, 0)} prefixClass='car' value='iconhexiao2' size='18'
              color={`${process.env.mainColor}`}
            ></AtIcon>
          </AtInput>}
          {config.address && <Block>
            {TARO_ENV !== "h5" ? <Picker mode='region' value={region} onChange={this.regionChange.bind(this)}>
              <AtInput className='require'
                value={contactData.province + contactData.city + contactData.region}
                name='region' title='选择地区' placeholder='请选择地区'
                customStyle='pointer-events: none;'
              ></AtInput>
            </Picker> : <Picker
              mode='multiSelector' // 多列选择
              onChange={this.onChange} // change事件
              onColumnChange={this.onColumnChange} // 某列改变的事件
              range={rangeData} //需要展示的数据
              value={rangeKey} // 选择的下标
            >
              <View className='add-flex require'>
                <View className='label'>所在地区</View>
                <View className='addcheck'>
                  {region[0] && (
                    <Text>
                      {region[0] && <Text>{region[0].indexOf(',') > -1 ? region[0] : region[0] + ','}</Text>}
                      {region[1] && <Text>{region[1].indexOf(',') > -1 ? region[1] : region[1] + ','}</Text>}
                      {region[2] && <Text>{region[2]}</Text>}
                    </Text>
                  )}
                  {!region[0] && (
                    <Text style='color:#CCC'>选择省市区</Text>
                  )}
                  <AtIcon value='chevron-right' size='14' color='#888888'></AtIcon>
                </View>
              </View>
            </Picker>}
          </Block>}
          {config.address && <AtInput clear className='require' name='address' type='text'
            value={contactData.address} title='详细地址' placeholder='详细地址'
            onChange={this.handleChange.bind(this, 'address')}
          ></AtInput>}
          {fieldCustom.map((item, index) =>
            <Block key={index}>
              <AtInput clear className={`${item.ckd ? 'require' : ''}`} name={item.name} type='text'
                value={contactData[item.name]} title={item.k}
                onChange={this.handleChange.bind(this, item.name)}
              >
              </AtInput>
            </Block>)}
          {config.upload_file && <View className='uplode-box upload_img'>
            <View className='uplode-title'><Text>*</Text>上传图片</View>
            <View className='uplode-list'>
              {Array.isArray(contactData.upload_file) && contactData.upload_file && contactData.upload_file.length > 0 && contactData.upload_file.map((v, i) =>
                <View className='uplode-item' key={i}><View className='uplode-item-box'>
                  <View className='uplode-close' onClick={this.delUplodeImg.bind(this, 0, i)}><AtIcon value='close'
                    size='12'
                    color='#999'
                  /></View><Image
                    src={v} mode='aspectFill'
                  /></View></View>
              )}
              <View className='uplode-item uplode-add' onClick={this.uplodeImg.bind(this, 1)}><AtIcon value='add'
                size='30'
                color='#999'
              /></View>
            </View>
          </View>}
          {config.face && <View className='uplode-box'>
            <View className='uplode-title'><Text>*</Text>上传人脸</View>
            <View className='uplode-list'>
              {contactData.face &&
              <View className='uplode-item'>
                <View className='uplode-item-box'>
                  <View className='uplode-close' onClick={this.delUplodeImg.bind(this, 2)}>
                    <AtIcon value='close' size='12' color='#999'></AtIcon>
                  </View>
                  <Image src={contactData.face} mode='aspectFill'></Image>
                </View>
              </View>}
              {!contactData.face &&
              <View className='uplode-item uplode-add' onClick={this.uplodeImg.bind(this, 2)}><AtIcon value='add'
                size='30'
                color='#999'
              ></AtIcon></View>}
            </View>
          </View>}
          {config.mark && isCombination &&
          <AtInput clear className='require' name='mark' type='text' value={contactData.mark} title='备注'
            placeholder='特殊备注信息'
            onChange={this.handleChange.bind(this, 'mark')}
          />}
          {config.comments && isCombination &&
          <AtInput clear className='require' name='comments' type='text' value={contactData.comments} title='留言'
            placeholder='留言'
            onChange={this.handleChange.bind(this, 'comments')}
          />}

        </AtForm>
        <View className='btn_box'>
          {idx != 0 && <View onClick={this.contactAdd.bind(this)} className='save-add-btn'>保存并继续新增</View>}
          {idx == 0 && <View onClick={() => {
            this.setState({delModal: true})
          }} className='save-add-btn'
          >删除</View>}
          <View onClick={this.contactAdd.bind(this, 1)} className='save-btn'>保存</View>
        </View>
        <AtModal
          isOpened={delModal}
          cancelText='取消'
          confirmText='确认'
          onClose={() => {
            this.setState({delModal: false})
          }}
          onCancel={() => {
            this.setState({delModal: false})
          }}
          onConfirm={this.delLink.bind(this)}
          content='是否确定删除?'
        />
      </View>
    )
  }
}

export default addcontact as ComponentClass<PageOwnProps, PageState>
